<template>
  <el-dialog
    class="public-dialog"
    :title="title"
    width="350"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div v-loading="loading">
      <template v-if="freight_html?.length">
        <div v-for="item in freight_html" :key="item" class="flex">
          <template
            v-if="
              item.value == 'totalCost' ||
              item.value == 'baseCost' ||
              item.value == 'surcharge'
            "
          >
            <div class="font-bold mb-[8px] w-[100%]">{{ item.label }}</div>
          </template>
          <template v-else>
            <div
              class="text-[14px] text-[#333] leading-[20px] mr-[43px] mb-[8px]"
              style="text-indent: 2em"
            >
              <span>{{ item.label }}：</span>
              <span>{{ item.value || 0 }}</span>
            </div>
          </template>
        </div>
      </template>
      <template v-else>
        <div v-if="error_info" class="mt-[10px] mb-[10px]">
          {{ error_info }}
        </div>
        <div class="mt-[10px] mb-[10px]" v-else>暂无数据</div>
      </template>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus";

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  title: { type: String, default: "系统金额运费" },
  data: { type: Object, default: () => ({}) },
  type: { type: String, default: "" },
});

const emit = defineEmits(["update:modelValue", "refresh", "close"]);

const loading = ref(false);
const freight_html = ref([]);
const title = ref("");
const error_info = ref("");
watch(
  () => props.data,
  (val) => {
    freight_html.value = [];
    if (props.type === "system") {
      title.value = "系统金额运费";
      freight_html.value.push({
        label: "总运费",
        value: "totalCost",
      });
      for (let key in props.data?.extend?.total_freight?.detail) {
        freight_html.value.push({
          label: key,
          value: props.data?.extend?.total_freight?.detail[key],
        });
      }
      freight_html.value.push({
        label: "基础运费",
        value: "baseCost",
      });
      for (let key in props.data?.extend?.freight_info?.detail) {
        freight_html.value.push({
          label: key,
          value: props.data?.extend?.freight_info?.detail[key],
        });
      }
      freight_html.value.push({
        label: "附加费",
        value: "surcharge",
      });
      for (let key in props.data?.extend?.surcharge_details) {
        freight_html.value.push({
          label: key,
          value: props.data?.extend?.surcharge_details[key],
        });
      }
    } else {
      title.value = "物流金额运费";
      let arr = [];
      if (props.data?.api_calc?.exchange_rate) {
        arr.push({
          label: "汇率",
          value: props.data?.api_calc?.exchange_rate,
        });
      }
      if (props.data?.api_calc?.freight_cny) {
        arr.push({
          label: "运费(CNY)",
          value: props.data?.api_calc?.freight_cny,
        });
      }
      freight_html.value = props.data?.api_calc?.detail?.map((item) => {
        return {
          label: item.cost_label,
          value: `${item.cost_value}/${item.cost_currency}`,
        };
      });
      if (arr?.length) freight_html.value = arr.concat(freight_html.value);
      error_info.value = props.data?.api_calc?.error_info || "";
    }
  }
);

const handleClose = async (refresh) => {
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
<style scoped></style>
